<template>
    <form action="#" method="post" :model="registerForm">
        <div class="boxUnit">
          <span id="loginFont">注册</span>
          <p id="clickMeRegister">
            已有账号？
            <span class="rotateButton" @click="registerRotate">点我登录</span>
          </p>
          <router-view />
        </div>
        <div class="boxUnit">
          <input
            type="text"
            class="input_content"
            required="required"
            v-model="registerForm.userName"
            placeholder="用户名*"
          />
        </div>
        <div class="boxUnit">
          <input
            type="password"
            class="input_content"
            required="required"
            v-model="registerForm.passWord"
            placeholder="密码*"
          />
        </div>
        <div class="boxUnit">
          <input
            type="text"
            class="input_content"
            v-model="registerForm.phone"
            placeholder="手机号"
          />
        </div>
        <div class="boxUnit">
          <input
            type="text"
            class="input_content"
            v-model="registerForm.email"
            placeholder="邮箱账号"
          />
        </div>
        <div class="boxUnit">
          <input
            type="submit"
            class="input_content"
            id="loginButton"
            value="注册"
            @click.prevent="register"
          />
        </div>
    </form>
</template>

<script>
export default {
    name:"RegisterForm",
    data(){
        return{
            registerForm:{
            userName:"",
            passWord:"",
            email:"",
            phone:""
            },
        }
    },
    methods: {
        // 注册验证
        registerVerify: function () {
        var nameReg = /(^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{0,2}$)/;
        var passwordReg = /^[a-zA-Z0-9]{0,5}$/;
        var emailReg = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9-.]+$/;
        var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (this.registerForm.userName.match(nameReg)) {
            alert("用户名长度最短需为3位！");
            return false;
        }
        if (this.registerForm.passWord.match(passwordReg)) {
            alert("请输入正确的密码！");
            return false;
        }
        if (!this.registerForm.phone.match(phoneReg) || this.userPhoneNumber == "") {
            alert("请输入正确的手机号码");
            return;
        }
        if (!this.registerForm.email.match(emailReg) || this.userEmailNumber == "") {
            alert("请输入正确的邮箱号码");
            return;
        }
        return true;
        },
        // 注册验证
        register: function () {
            if(this.registerVerify() == false) return;
            var that = this;
        //     this.userPassword.value = md5(this.userPassword.value)
                axios.post("/WebApps/registerServlet",that.registerForm)
                .then(response => {
                    if(response.data.code !== 200 || response.data.code) {
                        that.$message.error("注册失败！");
                        return;
                    }
                    else that.$message.success("注册成功！");
                    },
                    function (err) {
                    console.log(err);
                    }
                );
        },
        // 旋转，调用父组件中的方法
        registerRotate(){
            this.$parent.registerRotate();
        }
    },
}
</script>

<style>

</style>